<script lang="ts" setup>
  import { reactive, ref } from 'vue'
  import resconfig from '@/api/userService'
  import { ElMessage } from 'element-plus'
  import { useRouter, useRoute } from 'vue-router'
  import mitt from '@/utils/mitt'
  const router = useRouter()
  const route = useRoute()
  const contentInfo = ref({} as { [key: string]: string })
  let showEdit = ref({
    domain_name: false,
    project_id: false
  } as { [key: string]: boolean })
  const setData = () => {
    if (route.params.Rdata) {
      const str: string = decodeURIComponent(route.params.Rdata as string)
      contentInfo.value = JSON.parse(str)
    }
  }

  const param = reactive({
    resconfig: {
      domain_name: '',
      project_id: '',
      agency_name: '',
      region: '',
      keypair_name: ''
    }
  })

  const onSubmit = async () => {
    param.resconfig = JSON.parse(JSON.stringify(contentInfo.value))
    if (!param.resconfig.domain_name.trim()) {
      ElMessage({
        message: '请填写租户名称',
        type: 'warning'
      })
      return false
    }
    if (!param.resconfig.project_id.trim()) {
      ElMessage({
        message: '请填写项目ID',
        type: 'warning'
      })
      return false
    }
    try {
      let res = await resconfig.changeResconfig(param)
      if (res.status < 300) {
        ElMessage({
          message: '修改成功',
          type: 'success'
        })
        mitt.emit('getRegion')
        router.push({ name: 'userInfoList' })
      }
    } catch (err) {
      ElMessage.error('修改失败')
    }
  }
  const backUserInfo = () => {
    router.go(-1)
  }
  const changeUser = (key: string) => {
    for (const k in showEdit.value) {
      if (k != key) {
        showEdit.value[k] = false
      }
    }
    showEdit.value[key] = true
  }
  const closeRow = async (key: string) => {
    await setData()
    showEdit.value[key] = false
  }
  setData()
</script>
<template>
  <div id="rDetails">
    <div class="create-box">
      <span>资源租户信息</span>
      <span class="back return" @click="backUserInfo">&lt;&nbsp;返回</span>
    </div>
    <div class="form-box">
      <div class="card-box">
        <div class="card-content">
          <div class="card-label">租户名称</div>
          <div class="card-text">
            <span v-if="!showEdit['domain_name']">{{ contentInfo['domain_name'] }}</span>
            <el-input v-else v-model.trim="contentInfo['domain_name']" maxlength="1024" />
          </div>
          <div class="edit">
            <div v-if="!showEdit['domain_name']" class="actions-box">
              <div class="actions-details" @click="changeUser('domain_name')">修改</div>
            </div>
            <div v-else class="actions-box">
              <div class="actions-details" @click="onSubmit()">保存</div>
              <div class="line"></div>
              <div class="actions-details" @click="closeRow('domain_name')">取消</div>
            </div>
          </div>
        </div>
        <div class="card-content">
          <div class="card-label">项目ID</div>
          <div class="card-text">
            <span v-if="!showEdit['project_id']">{{ contentInfo['project_id'] }}</span>
            <el-input v-else v-model.trim="contentInfo['project_id']" maxlength="1024" />
          </div>
          <div class="edit">
            <div v-if="!showEdit['project_id']" class="actions-box">
              <div class="actions-details" @click="changeUser('project_id')">修改</div>
            </div>
            <div v-else class="actions-box">
              <div class="actions-details" @click="onSubmit()">保存</div>
              <div class="line"></div>
              <div class="actions-details" @click="closeRow('project_id')">取消</div>
            </div>
          </div>
        </div>
      </div>
      <div class="card-box">
        <div class="card-one-content">
          <div class="card-content">
            <div class="card-label">区域</div>
            <div class="card-text">{{ contentInfo['region'] }}</div>
          </div>
          <div class="card-content">
            <div class="card-label">密钥名</div>
            <div class="card-text">{{ contentInfo['keypair_name'] }}</div>
          </div>
        </div>
      </div>
      <div class="card-box">
        <div class="card-content">
          <div class="card-label">云服务委托名</div>
          <div class="card-text">
            {{ contentInfo['agency_name'] || '--' }}
          </div>
        </div>
      </div>
      <div class="card-box">
        <div class="card-content">
          <div class="card-label">AuxProxy路径</div>
          <div class="card-text">
            {{ contentInfo['auxproxy_path'] || '--' }}
          </div>
        </div>
        <div class="card-content">
          <div class="card-label">ECS-应用包配置脚本路径</div>
          <div class="card-text">
            {{ contentInfo['build_script_path'] || '--' }}
          </div>
        </div>
        <div class="card-content">
          <div class="card-label">文件存放Region</div>
          <div class="card-text">
            {{ contentInfo['file_storage_region'] || '--' }}
          </div>
        </div>
        <div class="card-content">
          <div class="card-label">容器-应用包配置脚本路径</div>
          <div class="card-text">
            {{ contentInfo['docker_build_script_path'] || '--' }}
          </div>
        </div>
      </div>
    </div>
  </div>
</template>
<style lang="scss" scoped>
  #rDetails {
    background-color: $blank-color;
    .create-box {
      height: 60px;
      width: calc(100% - 200px);
      position: absolute;
      top: 50px;
      left: 200px;
      background-color: $blank-color;
      color: $text-color;
      display: flex;
      align-items: center;
      z-index: 1;
      span {
        font-size: 16px;
        font-weight: bold;
        margin-left: 20px;
        margin-right: 10px;
        line-height: 60px;
      }
      .button {
        width: 100px;
        height: 28px;
      }
      .return {
        margin-left: 8px;
        font-size: 14px;
      }
    }
    .form-box {
      background-color: $blank-color;
      padding: 30px;
      margin-top: 60px;
      font-size: 14px;
      .card-box {
        padding: 30px 0;
        display: flex;
        flex-wrap: wrap;
        .card-content {
          width: 45%;
          display: flex;
          align-items: center;
        }
        .card-one-content {
          width: 100%;
          display: flex;
          .two {
            display: flex;
            width: 45%;
          }
        }
        .card-label {
          color: $action-color;
          width: 165px;
          margin-right: 20px;
        }
        .card-text {
          color: $text-color;
          .el-input {
            width: 280px;
          }
        }
        .edit {
          margin-left: 20px;
        }
        .actions-box {
          display: flex;
          align-items: center;
          color: $action-color;
          cursor: pointer;
          .line {
            width: 1px;
            height: 14px;
            background-color: $action-color;
            margin: 0 10px;
          }
          .actions-details:hover {
            color: $main-color;
          }
          .actions-delete:hover {
            color: $main-color;
          }
        }
      }
      .card-box:nth-child(2) {
        border-top: 1px solid $border-color;
        margin-bottom: -20px;
      }
      .card-box:last-child {
        border-top: 1px solid $border-color;
      }
      .card-box:last-child .card-label {
        width: 165px;
      }
      .card-box:last-child .card-content:last-child,
      .card-box:last-child .card-content:nth-child(3) {
        padding-top: 30px;
      }
    }
  }
</style>
